import React from 'react';
import PropTypes from 'prop-types';
import { Button, Tag, Balloon } from '@teamix/ui';
import { YunxiaoList, YunxiaoIcon } from '@alife/devops-ui';
import { PROJECT_ADMIN_ROLES } from 'utils/constants.js';
import AccessContainer from 'components/accessContainer';
import { access } from 'components/accessContainer/util';
import { navigate, Link } from 'utils/router';
import './index.scss';
import BuildsResultTag from 'components/buildsResultTag';
import utils from 'utils';
import UpdateInfo from './updateInfo';
import track from 'utils/track';
import intl from '../../../../../../../../locale';

const { pathResource } = window.FORCE;

export default class DefaultList extends React.Component {
  static propTypes = {
    branchDataSource: PropTypes.arrayOf(PropTypes.object),
    projectInfo: PropTypes.object,
  };

  onProtectedBranchClick = () => {
    navigate(`/${pathResource.fullPath}/protected_branches`);
  };

  onDefaultBranchClick = () => {
    track({
      action: 'set_default_branch',
      page: 'Repo-Branches',
      type: '',
      control: '',
    });

    navigate(`/${pathResource.fullPath}/settings/branches`);
  };

  render() {
    const { branchDataSource, projectInfo } = this.props;
    const { role, isArchive } = pathResource;

    const dataSource = {
      body: {
        title: [
          <span className="branch-card-item-title">
            {branchDataSource.protected ? (
              <YunxiaoIcon
                style={{ float: 'left' }}
                type="safe-line"
                className="branch-item-icon icon-protection"
              />
            ) : (
              <YunxiaoIcon
                style={{ float: 'left' }}
                type="branches-line"
                className="branch-item-icon"
              />
            )}

            <Balloon.Tooltip
              align="t"
              trigger={
                <Link
                  style={{ float: 'left' }}
                  to={`/${pathResource.fullPath}/tree/${utils.revisionEncodeURI(
                    branchDataSource.name,
                  )}`}
                  className="branch-item-title"
                >
                  {branchDataSource.name}
                </Link>
              }
            >
              {branchDataSource.name}
            </Balloon.Tooltip>
            {branchDataSource.protected ? (
              <span>
                {access(PROJECT_ADMIN_ROLES, role) ? (
                  <Tag
                    type="link"
                    href={`/${pathResource.fullPath}/settings/branches`}
                    target="_blank"
                    className="protected-branch-tag"
                    color="green"
                  >
                    {intl.get({
                      id: 'code-assets.containers.branchListItem.default.ProtectionBranch',
                      defaultMessage: '保护分支',
                    })}
                  </Tag>
                ) : (
                  <Tag className="protected-branch-tag" color="green">
                    {intl.get({
                      id: 'code-assets.containers.branchListItem.default.ProtectionBranch',
                      defaultMessage: '保护分支',
                    })}
                  </Tag>
                )}
              </span>
            ) : null}
            <BuildsResultTag
              container={{
                target: 'commit', // 可选值为 commit 和 merge_request
                id: branchDataSource.commit.id, // commit 或 merge_request 的 id
              }}
              projectInfo={projectInfo}
            />
          </span>,
          <UpdateInfo branchDataSource={branchDataSource} />,
        ],
      },

      right: {
        items: [
          isArchive === 'false' ? (
            <AccessContainer neededRole={PROJECT_ADMIN_ROLES} role={role}>
              <Button type="normal" onClick={this.onDefaultBranchClick}>
                {intl.get({
                  id: 'code-assets.containers.branchListItem.default.ModifyTheDefaultBranch',
                  defaultMessage: '修改默认分支',
                })}
              </Button>
            </AccessContainer>
          ) : null,
        ],
      },
    };

    return (
      <YunxiaoList.Item
        title={dataSource.body.title[0]}
        description={dataSource.body.title[1]}
        extra={<YunxiaoList.Item.Actions>{dataSource.right.items}</YunxiaoList.Item.Actions>}
      />
    );
  }
}
